<template>
	<div class="mainContent offerinfo-container">
		<!-- 供应商报价信息 -->
		<div class="bread-nav">
			<span class="bread-item">供应商管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">供应商基本信息</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">供应商报价信息</span>
		</div>
		<!--  -->
		<div class="offerinfo-contant">

			<!-- search form -->
			<div class="search-cont">
				<!--  -->
				<card :configArr="Model.configArr" @changingCondition="cardEmit"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!-- search form end-->
			<!-- table -->
			<div class="offerinfo-table">
				<!--  -->
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">供应商换算</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item" @click="batchApproval">批量审批</div>
							<div class="common-table-btn-item" @click="batchExport">批量导出</div>
						</div>
					</div>
				</el-row>
				<!--  -->
				<el-row class="common-table-con">
					<el-table stripe :data="Model.tableData" :row-style="selectedHighlight" @selection-change="handleSelectionChange">
						<el-table-column type="selection" fixed="left" align="center" width="50">
						</el-table-column>
						<el-table-column align="center" v-for="(item,index) in Model.tableHeaderData" :key="index" :fixed="item.fixed"
						 :prop="item.prop" :label="item.label" :width="item.width">
						</el-table-column>
						<el-table-column align="center" fixed="right" label="操作" width="100">
							<template slot-scope="scope">
								<div v-if="scope.row.status == '待审批' " class="operate-btn" @click="handleClickApproval(scope.row)">审批</div>
								<!-- <div v-else-if="scope.row.status == '已审批' " class="operate-btn" @click="handleClickObsolete(scope.row)">作废</div> -->
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<el-row class="pagination-cont">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
						 :page-sizes="[10, 20, 30, 40]" :pager-count="5" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
						 :total="Model.paginationObject.total">
							<div class="pagination-slot">
								显示
								<p class="slot-i">{{Model.paginationObject.num1}}</p>
								到
								<p class="slot-i">{{Model.paginationObject.num2}}</p>
								，共
								<p class="slot-i">{{Model.paginationObject.total}}</p>
								记录
							</div>
						</el-pagination>
					</el-row>
				</el-row>
			</div>
			<!--  -->
			<!-- 操作提示 -->
			<el-dialog :visible.sync="Model.dialogAlert" top="100px" class="operate-tips-dialog">
				<!--  -->
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">提示</div>
				</div>
				<p v-if="Model.confirmStatus == '30'" class="confirm-msg">是否确定审核？</p>
				<p v-else-if="Model.confirmStatus == '40'" class="confirm-msg">是否确定作废？</p>
				<p v-if="Model.tipsMsg == 'success' " class="confirm-msg">操作成功</p>
				<p v-else-if="Model.tipsMsg == 'failure' " class="confirm-msg">操作失败</p>
				<div class="operate-tips-btn-group">
					<div class="operate-tips-btn-item" @click="confirm">确定</div>
					<div class="operate-tips-btn-item" @click="dialogAlert = false">取消</div>
				</div>
			</el-dialog>
			<!-- 提示3 -->
			<el-dialog :visible.sync="Model.dialogTips" top="100px" class="operate-tips-dialog">
				<!--  -->
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">提示</div>
				</div>
				<p class="confirm-msg">{{Model.dialogTipsMsg}}</p>
			</el-dialog>
			<!--  -->
		</div>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "spotOrder",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
